<template>
	<view>
		<cover-view :style="{top:statusHeight+'px'}" class="video-control u-f-r">
			<cover-view class="backView">
				<cover-view class="navTitle">{{navTitle}}</cover-view>
				<!-- <cover-image class="backImg" src="https://statics.xmcsrv.net/weixin/video-back.png" /> -->
			</cover-view>
			<!-- <cover-view class="loading-box u-f-c">
				<cover-view class="navTitle">{{navTitle}}</cover-view>
			</cover-view> -->
		</cover-view>
		<view class="definition" :style="{top:(statusHeight+50)+'px'}" @click="changeDefinition">{{isHd?'高清':'标清'}}</view>
		<!-- 网速 -->
		<view class="netSpeed" :style="{top:navBarHeight+'px'}">
			{{netSpeed}}
			<cover-view v-if="isLoading" class="loading">{{ loadingText }}</cover-view>
		</view>
		<!-- && TailoredInfo.bs != 3 -->
		<view class="cell-box" :style="{top:navBarHeight+'px'}">
			<view class="cell cell—up" v-if="bl">
				<view :style="{color:colorbg(bl)}" class="cell-text"></view>
				<j-electric :ElectricQuantity="bl > 0 ? bl : 0" isElectric></j-electric>
			</view>
		</view>
		<view class="wifi-box" :style="{top:navBarHeight+'px'}">
			<image style="width: 40rpx;height: 40rpx;" :src="wifiUrl" mode="">
			</image>
		</view>
		<cover-view class="u-f-ajc u-f-c sheet" v-if="isShowHD">
			<cover-view class="u-f-ajc item" v-for="(item,index) in hdList" :key="index" @click="selectHd(item)">
				{{item.label}}
			</cover-view>
		</cover-view>
		<!-- 显示网速 -->
		<cover-view v-if="envVersion!='release'" class="float">
			<!-- <cover-view>当前视频帧率：{{videoFPS}}</cover-view> -->
			<!-- <cover-view>缓冲的视频总时长：{{videoCache}}ms</cover-view>
			<cover-view>缓冲的音频总时长：{{audioCache}}ms</cover-view>
			<cover-view>音画同步错位时间（播放）：{{avPlayInterval}}ms</cover-view>
			<cover-view>音画同步错位时间（网络）：{{avRecvInterval}}ms</cover-view>
			<cover-view>网络抖动情况：{{netJitter}}</cover-view>
			<cover-view>网络质量：{{netQualityLevel}}</cover-view>
			<cover-view>缓冲的总视频帧数：{{vSumCacheSize}}</cover-view> -->
			<cover-view>当前视频编/码器输出的比特率：{{pushVideoInfo.videoBitrate}} kbps</cover-view>
			<cover-view>当前音频编/码器输出的比特率：{{pushVideoInfo.audioBitrate}}kbps</cover-view>
			<cover-view>当前视频帧率：{{pushVideoInfo.videoFPS}}</cover-view>
			<cover-view>当前视频 GOP,也就是每两个关键帧(I帧)间隔时长）：{{pushVideoInfo.videoGOP}}s</cover-view>
			<cover-view>当前的发送/接收速度：{{pushVideoInfo.netSpeed}}</cover-view>
			<cover-view>视频画面的宽度：{{pushVideoInfo.videoWidth}}</cover-view>
			<cover-view>视频画面的高度：{{pushVideoInfo.videoHeight}}</cover-view>
			<cover-view>主播端堆积的视频帧数：{{pushVideoInfo.videoCache}}</cover-view>
			<cover-view>主播端堆积的音频帧数：{{pushVideoInfo.audioCache}}</cover-view>
		</cover-view>
		<!-- 播放暂停按钮  -->
		<view v-if="isShowPlayBtn" class="rePlay u-f-ajc" :style="{top:(playHeight/2-60)+'px'}" @click="continuePlay('videoTalk')">
			<image src="https://statics.xmcsrv.net/weixin/replay.png" class="img"></image>
		</view>
		<view style="width: 100%;background: black;" :style="{height:playHeight+'px'}">
			<live-player v-if="isShowPlayer" id="livePlayer" :src="url" :min-cache="cacheMinTime"
				:max-cache="cacheMaxTime" :autoplay="isPlay" mode="live" @statechange="statechange" :muted="isSpeakerOn"
				:auto-pause-if-navigate="false" :auto-pause-if-open-native="false" @error="error" style="width: 100%;"
				:style="{height:playHeight+'px'}" object-fit="contain" @audiovolumenotify="bindaudiovolumenotify"
				@netstatus="netstatusChange" />
		</view>
		<!-- 对讲组件 -->
		<view class="pushView"
			@touchmove.stop="touchMove" :style="{top: pushTop+'px'}">
			<live-pusher v-if="isShowPush" id="pushLive" class="live" style="width: 240rpx;height: 300rpx;z-index: 999;"
				:url="twoWayVideoUrl" mode="RTC" :autopush="isPush" :fps="fps" :video-width="320" :video-height="640"
				:enable-camera="isCameraOn" :device-position="cameraPosition" :audio-volume-type="volumeType"
				:enable-mic="isMicrophoneOn" :enable-agc="true" :enable-ans="true" @statechange="statechange2"
				@error="error2" :max-bitrate="600" audio-quality="low" :voice-changer-type="voiceType"
				@netstatus="netstatusChangePusher">
			</live-pusher>
		</view>
		<view v-if="!isCameraOn" class="pushView cameraOff" :style="{top: pushTop+'px'}"></view>
		<image v-if="!isCameraOn" class="logo" :style="{top: (pushTop+55)+'px'}" src="https://statics.xmcsrv.net/account/HeadImage/jlink_7610.png" mode=""></image>
		<view class="u-f-r bottom-control" :style="{height:bottomHeight+'px'}">
			<view class="u-f-ajc" style="width: 100%;margin-top: 10px;position: relative;">
				<view v-if="isStartCountDown" class="countdown">
					{{countDown}}
				</view>
				<view class="item item1" @click="changeMicrophone">
					<image v-if="isMicrophoneOn" src="https://statics.xmcsrv.net/weixin/live/microphone_on.png"
						class="img1"></image>
					<image v-else src="https://statics.xmcsrv.net/weixin/live/microphone_off.png" class="img1"></image>
					<view>麦克风已{{isMicrophoneOn?'开':'关'}}</view>
				</view>
				<view class="item item1" @click="changeSpeaker">
					<image v-if="!isSpeakerOn" src="https://statics.xmcsrv.net/weixin/live/voice_on.png" class="img1">
					</image>
					<image v-else src="https://statics.xmcsrv.net/weixin/live/voice_off.png" class="img1"></image>
					<view>扬声器已{{isSpeakerOn?'关':'开'}}</view>
				</view>
			</view>
			<view class="u-f-ajc" style="width: 100%;margin-top: 10px;">
				<view class="item item1" @click="changeCameraOn">
					<image v-if="isCameraOn" src="https://statics.xmcsrv.net/weixin/live/camera_on.png" class="img1">
					</image>
					<image v-else src="https://statics.xmcsrv.net/weixin/live/camera_off.png" class="img1"></image>
					<view>手机镜头已{{isCameraOn?'开':'关'}}</view>
				</view>
				<view class="item item1" @click="hangUp">
					<image src="https://statics.xmcsrv.net/weixin/hangUp.png" class="img2"></image>
					<view>挂断</view>
				</view>
				<view class="item item1" @click="changeCameraPosition">
					<image src="https://statics.xmcsrv.net/weixin/live/switchCamera_on.png" class="img1"></image>
					<view>手机摄像头切换</view>
				</view>
			</view>
		</view>
		<!-- 登录 -->
		<j-device-login ref="deviceLogin" :device="device" @submit="submit"></j-device-login>
		<!-- 设备状态弹窗 -->
		<j-modal :value="LightSleepStatus" :showCancel="false" title="提示" @ok="closeSleepStatusPopup('LightSleep')">
			<view slot="content">
				设备已进入浅度休眠状态，可点击画面上的播放按钮继续预览
			</view>
		</j-modal>
		<j-modal :value="DeepSleepStatus" :showCancel="false" title="提示" @ok="closeSleepStatusPopup('DeepSleep')">
			<view slot="content">
				设备已进入深度休眠状态，请手动唤醒后继续访问设备
			</view>
		</j-modal>
		<j-modal :value="noDataStatus" title="提示" @cancel="closeSleepStatusPopup('back')"
			@ok="closeSleepStatusPopup('noData')">
			<view slot="content">
				获取视频数据超时,是否重试?
			</view>
		</j-modal>
		<j-modal :value="deviceTerminatedCallStatus" :showCancel="false" :showConfirm="false" class="terminatedCall">
			<view class="hangup" slot="content">
				<image class="img" src="https://statics.xmcsrv.net/weixin/live/deviceTerminatedCall.png" mode=""></image>
				<view class="title">通话结束</view>
				<view class="desc">对方已挂断来电</view>
			</view>
		</j-modal>
        <!--    对讲被占用弹窗提示    -->
        <j-modal :value="talkStatus" :showCancel="false" @ok="showOk">
            <template slot="title">
                <text>提示</text>
            </template>
            <template slot="content">
                <text>有其它用户正在使用对讲功能，请稍后再试！</text>
            </template>
        </j-modal>
	</view>
</template>

<script>
	import rCanvas from "../../../components/r-canvas/r-canvas.vue"
	import {
		liveMixins
	} from './mixins/live.js'
	const {
		convertdBm2RSSI,
		calculateTimeDifference,
		formatDate
	} = require('@/utils/util.js');
	export default {
		mixins: [liveMixins],
		components: {
			rCanvas
		},
		data() {
			return {
				statusHeight: 0,
				bottomHeight: '',
				isShowVocie: false,
				voiceType: 0, //0 原声  2 萝莉  3 大叔
				voiceTypeDesc: '原声',
				voiceList: [],
				// rightList: [],
				websocket: null,
				wsWifiUrl: 0,
				// deviceStatus:'',
				playHeight: '',
				currentTime: 0,
				disConnectCount: 0,
				isShowDeepSleepModal: false,
				isShowLightSleepModal: false,
				isShowDelModal: false,
				playType: 0,
				videoFPS: 0,
				netJitter: 0,
				netQualityLevel: 0,
				vSumCacheSize: 0,
				videoCache: '',
				audioCache: '',
				avPlayInterval: '',
				avRecvInterval: '',
				LightSleepStatus: false,
				DeepSleepStatus: false,
				tempIcon: 'https://statics.xmcsrv.net/weixin/temporary2.png',
				lastMsgTime: 0, //每次开锁成功时获取最新的一次门铃来电消息时间

				isNonSpeaker: false, //true"无扬声器"
				isDevSpeaker: false,
				isFullDuplex: false,
				isHalfDuplex: false,
				talkIcon: 'https://statics.xmcsrv.net/weixin/talk-lexin.png',
				isCountDown: false,
				callCountDowntimer: null,
				callCountcount: 60,
			}
		},
		onLoad(options) {
			console.log(options.type, '门锁来电接收到的type')
			// 来电进入禁止自动播放
			if (this.playOrNot == 'suspend') {
				this.isPlay = false
			} else {
				this.isPlay = true
			}
			this.currentTime = new Date().getTime()
			this.unlockIcon = "https://statics.xmcsrv.net/weixin/live/operation/unlocking2.png"
			// this.getDeviceTypePropListByPageForApp();
		},
		onReady() {},
		onHide() {
			this.isShowPlayBtn = false
		},
		onShow() {
			this.isShowLightSleepModal = false;
			this.talkIcon = "https://statics.xmcsrv.net/weixin/talk-lexin.png"
			let deviceList = uni.getStorageSync('deviceList');
			for (let i = 0; i < deviceList.length; i++) {
				const item = deviceList[i];
				if (item.deviceNo === this.device.deviceNo) {
					// this.navTitle = item.deviceName;
					break;
				}
			}
			this.isPush = true
		},
		methods: {
			//切换标清和高清
			changeDefinition(){
				this.changeStream({id:'HD',icon:''})
			},
			//
			netstatusChangePusher(e) {
				console.log('数据推流网络状态变化', e, this.pushVideoContext);
				this.pushVideoInfo = e.detail.info
			},
			//移动窗口
			touchMove(e) {
				// console.log('手指在屏幕移动', e)
				let systemInfo = uni.getSystemInfoSync()
				this.pushTop = e.touches[0].clientY
				if (this.pushTop < 0) this.pushTop = 50
				if (this.pushTop > systemInfo.windowHeight - this.bottomHeight) this.pushTop = systemInfo.windowHeight -
					this.bottomHeight - 75
				console.log('手指在屏幕移动', this.pushTop, e)
			},
			// 切换麦克风
			changeMicrophone() {
				this.isMicrophoneOn = !this.isMicrophoneOn
			},
			// 切换扬声器
			changeSpeaker() {
				this.isSpeakerOn = !this.isSpeakerOn
				this.isMute = !this.isMute
				// this.volumeType = this.isSpeakerOn?'media':'voicecall'
			},
			// 切换前后摄像头
			changeCameraPosition() {
				this.pushVideoContext.switchCamera()
			},
			// 是否开启镜头
			changeCameraOn() {
				this.isCameraOn = !this.isCameraOn
				let type = this.isCameraOn?'VDResume':'VDPause'
				this.operateDeviceAvDecode(type)
			},
			//挂断
			hangUp(){
				// this.operateDeviceAvDecode('Stop')
				this.backAction()
			},
			//获取设备属性
			getDeviceTypePropListByPageForApp() {
				let data = {
					pid: this.device.pid,
					// isCondition: true,
					//true表示查询条件，false表示查询动作
					page: 1,
					limit: 999
				};
				getApp().globalData.api.getDeviceTypePropListByPageForApp(data, (result) => {
					console.log('设备的属性列表：', result);
					result.data.forEach(item => {
						// console.log(item)
						if (item.propCode == "nonSpeaker") {
							this.isNonSpeaker = true
						}
						if (item.propCode == 'devSpeaker') {
							this.isDevSpeaker = true
						}
						if (item.propCode == "fullDuplex") {
							this.isFullDuplex = true
						}
						if (item.propCode == 'halfDuplex') {
							this.isHalfDuplex = true
						}
					})
				})
			},
			// 网络状态变化
			netstatusChange(e) {
				// console.log('网络状态==',e.detail.info);
				let info = e.detail.info
				this.netSpeed = info.netSpeed != 0 ? (Number(info.netSpeed) / 8).toFixed(2) + ' KB/S' : this.netSpeed
				if (this.isStartPlay) {
					if (info.netSpeed == 0) {
						this.disConnectCount++
						if (this.disConnectCount == 10) {
							this.isShowPlayBtn = true
							this.playType = 1
							uni.showToast({
								title: '网络已断开，请重试',
								icon: 'none'
							})
						}
					} else {
						this.playType = 0
						this.disConnectCount = 0
					}
				}
				this.videoFPS = info.videoFPS
				this.netJitter = info.netJitter
				this.netQualityLevel = info.netQualityLevel
				this.vSumCacheSize = info.vSumCacheSize
				this.videoCache = info.videoCache
				this.audioCache = info.audioCache
				this.avPlayInterval = info.avPlayInterval
				this.avRecvInterval = info.avRecvInterval
			},
			//获取可视区域高度
			getClineHeight() {
				uni.getSystemInfo({
					success: (res => {
						this.playHeight = res.screenHeight
						this.bottomHeight = res.screenHeight * (1.1 / 3)
						this.statusHeight = res.statusBarHeight
					})
				});
			},

			//开始推送
			startPush() {
				console.log('开始对讲', this.deviceStatus);
				if (this.deviceStatus == 'LightSleep') {
					return uni.showToast({
						title: '设备处于浅休眠状态不能开启对讲',
						icon: 'none'
					})
				}
				let time = new Date().getTime()
				if (!this.isPush) {
					if ((this.lastClickTalkTimeStamp + 1000) > time) {
						this.clickTalkStatus = true
						return
					} else {
						this.lastClickTalkTimeStamp = time
					}
				}
				console.log('获取对讲点击时间==', time, this.lastClickTalkTimeStamp, (time - this.lastClickTalkTimeStamp), this
					.isPush);
				if (this.talkUrl) {
					this.dealwithSpeak()
				} else {
					this.getTalkBackUrl((url) => {
						if (url) {
							this.dealwithSpeak()
						}
					}, 1)
				}
			},
			//右边控制栏
			onBack() {
				if (this.pathType) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/jvss/pages/device/home'
					})
				}
			}
		}

	};
</script>
<style lang="scss">
	.popupName {
		/deep/ .uni-popup__wrapper {
			top: -100rpx;
		}
	}

	page {
		overflow: hidden;
	}

	/deep/ .uni-navbar--border {
		border-bottom: none !important;
		background: transparent !important;
	}

	// /deep/ .uni-cover-view{
	// 	overflow: visible !important;
	// }
	.cell-box {
		position: absolute;
		z-index: 999;
		// top: 10rpx;
		left: 10rpx;
		display: flex;


		.cell {
			color: #FF0025;
			display: flex;
			align-items: center;
			height: 45rpx;
			font-size: 20rpx;

			// line-height: 50rpx;
			.cell-text {
				margin: 0 10rpx;
			}
		}
	}

	.netSpeed {
		position: absolute;
		top: 10rpx;
		z-index: 999;
		left: 50%;
		transform: translateX(-50%);
		color: #FFFFFF;
		font-size: 24rpx;
	}

	.wifi-box {
		position: absolute;
		top: 10rpx;
		right: 30rpx;
		z-index: 999;
	}

	.video-control {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99;
	}

	.loading-box {
		// width: 50%;
		// height: 100%;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 0;
		z-index: 99;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.rePlay {
		z-index: 99;
		width: 244rpx;
		height: 244rpx;
		position: absolute;
		top: 200rpx;
		left: 50%;
		transform: translateX(-50%);

		.img {
			width: 122rpx;
			height: 122rpx;
		}
	}

	.backView {
		// width: 50rpx;
		height: 50rpx;
		padding: 40 0rpx;
	}

	.backImg {
		width: 32rpx;
		height: 32rpx;

	}

	.hd {
		position: absolute;
		right: 50rpx;
		top: 20rpx;
		z-index: 110;
		color: #ffffff;
		font-size: 26rpx;
		width: 140rpx;
		height: 50rpx;
		background: rgba(0, 0, 0, 0.39);
		border-radius: 25rpx;
	}

	.sheet {
		z-index: 99;
		position: absolute;
		width: 150rpx;
		top: 90rpx;
		right: 40rpx;
		background: white;
		padding: 0rpx 30rpx 30rpx;
		border-radius: 16rpx;

		.item {
			margin-top: 30rpx;
			flex: 1;
		}
	}
	.pushView{
		width: 240rpx;
		height: 300rpx;
		position: absolute;
		top: 120rpx;
		right:50rpx;
		z-index: 9999;
	}
	.cameraOff{
		background-color: rgba(255, 255, 255, 0.3);
		backdrop-filter: blur(10px);
		filter: blur(2px);
		z-index: 99999;
	}
	.logo{
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		top: 110rpx;
		right:130rpx;
		z-index: 999999;
	}
	.bottom-control {
		z-index: 99;
		position: absolute;
		height: 230rpx;
		bottom: 0rpx;
		right: 0rpx;
		left: 0rpx;
		flex-direction: column;

		.item1 {
			// margin-top: 60rpx;
			position: relative;
			color: white;
			font-size: 26rpx;
		}

		.item2 {
			// margin-top: 150rpx;
		}

		.item {
			flex: 1;
			height: 100%;
			flex-direction: column;
			display: flex;
			align-items: center;
			// justify-content: flex-start;
			justify-content: center;

			.img {
				width: 96rpx;
				height: 96rpx;
				margin: 0 40rpx;
			}

			.img2 {
				width: 140rpx;
				height: 140rpx;
				margin-bottom: 20rpx;
			}

			.img1 {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-bottom: 10rpx;
			}
		}

		.voice {
			padding: 30rpx 30rpx 0 30rpx;
			min-height: 60rpx;
		}

		.chooseVoice {
			border: 1px solid #333;
			border-radius: 18rpx;
			height: 50rpx;
			padding: 0 10rpx;
			position: relative;
		}

		.voiceType {
			position: absolute;
			// left: 0;
			right: 0;
			width: 200rpx;
			border: 1px solid #333;
			background: white;
			padding: 10rpx;
			border-radius: 10rpx;
			top: -240rpx;

			.item {
				padding: 15rpx 0;
				display: flex;
				flex-direction: row;
				justify-content: left;

				.img {
					width: 21px;
					height: 21px;
					margin: 0;
				}

				text {
					margin-left: 18rpx;
				}
			}

			.item:not(:last-child) {
				border-bottom: 1px solid #333;
			}

			.active {
				color: #FF0025;
			}

		}
	}

	.countdown {
		position: absolute;
		width: 200rpx;
		z-index: 999;
		text-align: center;
		color: white;
		font-size: 30rpx;
	}

	.right-control {
		z-index: 99;
		position: absolute;
		// height: 500rpx;
		height: 400rpx;
		right: 30rpx;
		top: 35%;
		transform: translateY(-50%);

		.item {
			flex: 1;

			.img {
				width: 70rpx;
				height: 70rpx;
			}

		}
	}

	/deep/.uni-popup {
		z-index: 115;
	}

	.form {
		background: white;
		padding: 50rpx 20rpx;
		border-radius: 10rpx;
		z-index: 99;

		.msg {
			color: #000000;
			font-weight: 600;
			text-align: center;
		}

		.cont {
			font-size: 28rpx;
			text-align: center;
		}

		.confirm {
			background: #FF0025;
		}

		.title {
			font-size: 34rpx;
			font-weight: bold;
			line-height: 49rpx;
			color: #464646;
		}

		.desc {
			font-size: 22rpx;
			color: #8A8A8A;
			line-height: 84rpx;
		}

		.form-item {
			margin-top: 40rpx;

			input {
				border: 1rpx solid #A5A5A5;
				border-radius: 8rpx;
				padding: 10rpx;
			}

			.cancel {
				background: #F6F7FB;
				color: #000000;
				font-size: 30rpx;
				width: 237rpx;
				height: 84rpx;
				border-radius: 42rpx;
			}

			.conf {
				margin-left: 20rpx;
				background: #FF0025;
				color: #ffffff;
				font-size: 30rpx;
				width: 237rpx;
				height: 84rpx;
				border-radius: 42rpx;
			}
		}
	}

	.navTitle {
		text-align: left;
		color: #ffffff;
		font-size: 32rpx !important;
		font-weight: 700;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 400rpx;
		height: 72rpx;
		line-height: 72rpx;
		margin-left: 40rpx
	}

	.loading {
		width: 100%;
		// height: 72rpx;
		// line-height: 72rpx;
		text-align: center;
		color: #ffffff;
		font-size: 24rpx;
	}

	.topbar {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 100;
		color: #ffffff;
		/* background: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0)); */
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 90rpx;

		.icon {
			transform: rotate(90deg);
			width: 36rpx;
			height: 36rpx;
		}
	}

	// .bottombar {
	// 	width: 100%;
	// 	position: absolute;
	// 	left: 0;
	// 	bottom: 7rpx;
	// 	z-index: 100;
	// 	color: #FFFFFF;
	// 	background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
	// 	background: rgba(0, 0, 0, 0.5);
	// 	display: flex;
	// 	justify-content: flex-end;
	// 	align-items: center;
	// }

	.icon {
		width: 72rpx;
		height: 72rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.img {
		display: block;
		width: 36rpx;
		height: 36rpx;
	}

	.capture {
		display: flex;
		flex-direction: column;
		position: absolute;
		left: 0;
		right: 0;
		z-index: 999;
		height: 250rpx;

		// transform: translateX(-50%);
		.img {
			width: 260rpx;
			height: 200rpx;
			border: 2px solid white;
			border-radius: 5rpx;
		}

		.descV {
			background: rgba(0, 0, 0, 0.5);
			color: white;
			font-size: 24rpx;
			width: 100%;
			height: 50rpx;
		}
	}

	.jf-button {
		background: transparent;
		width: auto;
		margin: 0;
		line-height: 1.25;
	}

	.jf-button::after {
		border: none;
	}

	.video-control-extra {
		height: 10vh;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #ffffff;
	}

	.control-inner {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 35vw;
		height: 35vw;
		border-radius: 100%;
		border: 1px solid #cccccc;
	}

	.control-handle {
		display: block;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
	}

	.control-top {
		top: 0;
	}

	.control-top-right {
		top: 30rpx;
		right: 30rpx;
		transform: rotate(45deg);
	}

	.control-right {
		right: 0;
		transform: rotate(90deg);
	}

	.control-right-bottom {
		right: 30rpx;
		bottom: 30rpx;
		transform: rotate(135deg);
	}

	.control-bottom {
		bottom: 0;
		transform: rotate(180deg);
	}

	.control-bottom-left {
		bottom: 30rpx;
		left: 30rpx;
		transform: rotate(225deg);
	}

	.control-left {
		left: 0;
		transform: rotate(270deg);
	}

	.control-left-top {
		left: 30rpx;
		top: 30rpx;
		transform: rotate(315deg);
	}

	.control-center {
		width: 12vw;
		height: 12vw;
		border-radius: 100%;
		background: #FF0025;
	}

	.box {
		width: 100rpx;
		height: 100rpx;
		border: 1px solid #999999;
		border-radius: 12rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.box.active {
		border: 1px solid #FF0025;
		color: #FF0025;
	}

	.cruise-empty {
		width: 100vw;
		height: 50vh;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #999999;
		text-align: center;
		font-size: 24rpx;
		background: #FFFFFF;
	}

	.popup-content {
		.item {
			padding: 40rpx 0;
			flex: 1;
			justify-content: center;
			display: flex;
			align-items: center;

			.desc {
				color: #666666;
				font-size: 30rpx;
				margin-top: 10rpx;
			}

			.img {
				width: 120rpx;
				height: 120rpx;
			}

		}

		.confirm {
			font-size: 30rpx;
			color: #2CBDB8;
			height: 98rpx;
		}

		.btn {
			width: 100%;
			color: #FF0025 !important;
			border-color: #dcdcdc !important;
			background-color: #FFFFFF !important;
		}
	}

	.float {
		position: absolute;
		top: 220rpx;
		left: 20rpx;
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
		font-size: 24rpx;
		padding: 10rpx;
		// background: red;
	}

	.showBg {
		width: 100%;
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		z-index: 9
	}
	.terminatedCall{
		/deep/.j-modal-content{
			width: 50vw;
		}
	}
	.hangup{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 50vw;
		.img{
			width: 160rpx;
			height: 160rpx;
		}
		.title{
			font-size: 30rpx;
			color: #2CBDB8;
			margin: 20rpx 0;
		}
		.desc{
			font-size: 24rpx;
			color: #6A6A6A;
		}
	}
	.definition{
		position: absolute;
		z-index: 99;
		border-radius: 10rpx;
		left: 40rpx;
		border: 1px solid white;
		padding: 5rpx 10rpx;
		color: white;
		font-weight: 600;
		text-align: center;
	}
</style>
